<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<style>
			#t1 {
				width: 60%;
				margin: 26px auto 0px;
				border-collapse: collapse;
			}
			
			#t1 td {
				font-size: 32px;
				width: 30px;
				padding: 0px;
				text-align: center;
				vertical-align: top;
			}
			
			#t1 span {
				background-color: lightgray;
				display: block;
				color: #aa55ff;
				padding: 14px 0px;
			}
			
			#t1 span:hover {
				background-color: yellow;
			}
			
			#td1:hover #div1, #td2:hover #div2, #td3:hover #div3, #td4:hover #div4 {
				display: block;
			}
			
			#t1 div {
				display: none;
				color: blue;
				background-color: gray;
				line-height: 56px;
			}
		</style>
	</head>
	<body>
		<table id="t1">
			<tr>
				<td>
					<span>首页</span>
				</td>
				<td id="td1">
					<span>菜单管理</span>
					<div id="div1">
						主页设置<br />
						系统设置<br />
						报表设置<br />
					</div>
				</td>
				<td id="td2">
					<span>数据库管理</span>
					<div id="div2">
						数据查询<br />
						数据更新<br />
						数据备份<br />
					</div>
				</td>
				<td id="td3">
					<span>站点管理</span>
					<div id="div3">
						信息管理<br />
						数据管理<br />
					</div>
				</td>
				<td id="td4">
					<span>站点设置</span>
					<div id="div4">
						站点1<br />
						站点2<br />
					</div>
				</td>
				<td>
					<span>联系我们</span>
				</td>
			</tr>
		</table>
	</body>
</html>
